<template>
  <view class="example">
    <view class="page-editor-container">
      <sv-tiptap v-model="eContent1" eid="sv-tiptap-editor1" ref="tiptapRef1" @onCreate="eCreate1" @onUpdate="eUpdate1">
        <template #header>
          <sv-tiptap-toolbar :bind-ref="tiptapRef1"></sv-tiptap-toolbar>
        </template>
      </sv-tiptap>
    </view>
    <view class="page-editor-container">
      <sv-tiptap v-model="eContent2" eid="sv-tiptap-editor2" ref="tiptapRef2" @onCreate="eCreate2" @onUpdate="eUpdate2">
        <template #header>
          <sv-tiptap-toolbar :bind-ref="tiptapRef2"></sv-tiptap-toolbar>
        </template>
      </sv-tiptap>
    </view>
  </view>
</template>

<script setup>
import { ref } from 'vue'
import SvTiptapToolbar from '@/uni_modules/sv-tiptap/components/sv-tiptap/sv-tiptap-toolbar.vue'

const tiptapRef1 = ref()
const tiptapRef2 = ref()
const eContent1 = ref({})
const eContent2 = ref({})

function eCreate1(e) {
  console.log('==== eCreate1 :', e)
  tiptapRef1.value.cmd(
    'insertContent',
    `<p>标题</p><p><img class="image-custom-class" src="https://fuss10.elemecdn.com/3/28/bbf893f792f03a54408b3b7a7ebf0jpeg.jpeg" style="width: 100%;">内容</p>`
  )
}

function eCreate2(e) {
  console.log('==== eCreate2 :', e)
  tiptapRef2.value.cmd('setVideo', {
    src: 'http://qiniu.sonve.asia/myvideos/cxk.mp4'
  })
}

function eUpdate1(e) {
  console.log('==== eUpdate1 :', e)
}
function eUpdate2(e) {
  console.log('==== eUpdate2 :', e)
}
</script>

<style lang="scss">
.example {
  box-sizing: border-box;
  height: calc(100vh - var(--window-top) - env(safe-area-inset-bottom));
  background-color: #f8f8f8;

  .page-editor-container {
    height: 250px;
    padding: 10px;
    box-sizing: border-box;
  }
}
</style>
